<%--
  Created by IntelliJ IDEA.
  User: W
  Date: 2025/9/27
  Time: 15:41
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>注册</title>
</head>
<body>
<form action="" method="post">
    <span>用户名：</span>
    <input type="text" name="username" id="username">
    <span id="tip"></span>
</form>
</body>
</html>

<%--<script type="text/javascript" src="js/ajax.js"></script>--%>
<script type="text/javascript" src="js/jquery-3.6.0.js"></script>
<script type="text/javascript">
    $(function () {
        $("#username").blur(function () {
            $.ajax({
                url: "checkUsername",
                type: "get",
                data: {
                    username: $(this).val()
                },
                success: function (resp) {
                    let tip = $("#tip");
                    //     对结果进行处理
                    if (resp === '1') {
                        tip.text("该账号已被注册");
                        tip.css("color", "red");
                    } else {
                        tip.text("该账号可用");
                        tip.css("color", "green");
                    }
                }
            })
        })
    })
    // let element = document.getElementById("username");
    // element.onblur = function () {
    //     let value = element.value;
    //     if (value != '') {
    //         ajax({
    //             url: "checkUsername",
    //             method: "get",
    //             data: {
    //                 username: value
    //             },
    //             success: function (resp) {
    //                 let tip = document.getElementById("tip");
    //                 //     对结果进行处理
    //                 if (resp === '1') {
    //                     tip.innerText = "用户名已存在";
    //                     tip.style.color = "red";
    //                 } else {
    //                     tip.innerText = "用户名可用";
    //                     tip.style.color = "green";
    //                 }
    //             }
    //         })
    /*let xmlHttpRequest;
    if (window.XMLHttpRequest) {
        xmlHttpRequest = new XMLHttpRequest();
    } else {
        // 微软IE
        xmlHttpRequest = new ActiveXObject("Microsoft.XMLHTTP");
    }
    xmlHttpRequest.onreadystatechange = function () {
        if (xmlHttpRequest.readyState === 4 && xmlHttpRequest.status === 200) {
            //     就绪状态为4，表示数据已经返回
            //     200表示服务器端返回数据成功
            let responseText = xmlHttpRequest.responseText;
            let tip = document.getElementById("tip");
            //     对结果进行处理
            if (responseText === '1') {
                tip.innerText = "用户名已存在";
                tip.style.color = "red";
            } else {
                tip.innerText = "用户名可用";
                tip.style.color = "green";
            }
        }
    }
    // get请求方法数据的方式  true表示异步 false表示同步
    xmlHttpRequest.open("get", "checkUsername?username=" + value, true);
    xmlHttpRequest.send();*/
    //     }
    // }
</script>
